<template>
    <virtual-node :name="name" :attributes="attributes"
                  :disabled="disabled" v-permission="attributes.permission">
        <slot />
    </virtual-node>
</template>

<script>
import attributes, { genProps } from "./attributes";

export default {
    name: "Custom",
    components: {
        VirtualNode: {
            functional: true,
            props: {
                name: String,
                attributes: Object,
                disabled: Boolean,
            },
            render (h, ctx) {
                let defaultProps = attributes[ctx.props.name] || {};
                let props = genProps(defaultProps, ctx.props.attributes);
                if (typeof ctx.props.disabled !== 'undefined') {
                    props.disabled = ctx.props.disabled;
                }
                return h(ctx.props.name, {
                    props,
                    on: ctx.listeners || {},
                }, ctx.slots().default);
            },
        },
    },
    props: {
        name: {
            type: String,
            required: true,
            default: 'div',
        },
        attributes: {
            type: Object,
            default: null,
        },
        disabled: {
            type: Boolean,
            default: null,
        },
    },
    data() {
        return {};
    },
    methods: {},
}
</script>

<style scoped>

</style>